
<template>
  <div>
    <!--填写运费-->
    <el-dialog
      title="填写运费"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="840px"
    >
      <div>
        <el-form
          size="mini"
          :model="sendForm"
          :rules="rules"
          label-width="100px"
          ref="sendForm"
        >
          <div>
            <el-table
              size="mini"
              :header-cell-style="{ background: '#f8f8f9', color: '#80878f' }"
              :data="sendForm.reqParams"
              border
              style="width: 100%; margin: 20px 20px"
            >
              <el-table-column width="150" align="center">
                <template slot="header" slot-scope="scope">
                  <span>品名牌号</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <span>{{ scope.row.categoryName }}/{{scope.row.goodsSn}}</span>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="数量(吨)" width="100" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <span>{{ scope.row.goodsNum }}</span>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="收货地址" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <span>{{ scope.row.receiveArea }}</span>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="发货地" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <span>{{ scope.row.sendArea }}</span>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="交货方式" width="100" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <span>{{ scope.row.sendTypes }}</span>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="运联运费" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" :prop="`reqParams.${scope.$index}.freightValue`">
                    <el-input style="margin-top: 10px;" v-model="scope.row.freightValue" clearable></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <div style="margin-left: 20px;line-height:20px;color: #ff5902;">
          <div>该客户最近一次的配送记录：<span>发货地至收货地的运费报价为{{ myPerFreightValue }}元/吨</span></div>
<!--          <div>收发货地址同市的报价记录：<span>{{ otherPerFreightValue }}元/吨</span></div>-->
          <div>收发货地址同市的报价记录</div>
          <el-table
            size="mini"
            :data="perFreightValueList"
            border
            style="width: 100%;">
            <el-table-column  align="center" label="数量" >
              <template slot-scope="scope">
                    {{scope.row.priceNum}}
              </template>
            </el-table-column>

            <el-table-column label="报价"  align="center">
              <template slot-scope="scope">
                {{scope.row.pFreightValue}} 元/吨
              </template>
            </el-table-column>

            <el-table-column label="报价时间" align="center">
              <template slot-scope="scope">
                {{scope.row.pFreightTime}}
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCustomerOption,
} from "@/api/allInLine/partner";
import {
  freightInput,
  inputOrderFreightAPI,
  suggestFreightAPI
} from "@/api/allInLine/inquiry";
import { mapGetters } from "vuex";
import { Message } from "element-ui";
const defaultSendForm = {
  reqParams: []
};
const defeaultGoodLineItem = {
  priceId: "",
  freightValue: "",
  sendTypes: "",
  sendArea: "",
  receiveArea: "",
  goodsSn: "",
  goodsNum: "",
};
export default {
  name: "index",
  data() {
    const validateFreight = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('运联运费不能小于0元'))
      }
      callback()
    };
    return {
      dialogVisible: false,
      btnLoading: false,
      sendForm: JSON.parse(JSON.stringify(defaultSendForm)),
      rules: {
        freightValue: [
          { required: true, message: '请输入运联运费', trigger: 'blur' },
          {validator: validateFreight,trigger:'blur'}
        ]
      },
      querySearchList: [],
      freightType: '',
      myPerFreightValue: 0,
      otherPerFreightValue:0,
      perFreightValueList:[]
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  components: {},
  created() {
    // orderGoodsList().then((res) => {
    //   this.goodsList = res.list;
    // });
  },
  filters: {},
  methods: {
    // 获取上一条运费记录
    getSuggestFreight(freightSn){
      suggestFreightAPI({
        freightSn
      }).then((res) => {
        this.myPerFreightValue = res.myPerFreightValue;
        this.otherPerFreightValue = res.otherPerFreightValue;
        this.perFreightValueList = res.perFreightValueList
      }).catch(()=>{})
    },

    //客户名称输入匹配
    querySearch(queryString) {
      if (queryString && queryString != ""){
        getCustomerOption({ keywords: queryString, tab: "my" }).then((res) => {
          this.querySearchList = res;
        });
      }
    },

    //显示询价
    showPop(item) {
      this.dialogVisible = true;
      this.getSuggestFreight(item.freightSn);
      if (item.hasOwnProperty('qList')) {
        this.freightType = 'crm';
        item.qList.forEach((item) => {
          const data = JSON.parse(JSON.stringify(defeaultGoodLineItem));
          data.priceId = item.priceId;
          data.categoryName = item.categoryName;
          data.freightValue = item.freightPrice;
          data.sendTypes = item.sendTypes;
          data.sendArea = item.sendArea;
          data.receiveArea = item.receiveArea;
          data.goodsSn = item.goodsSn;
          data.goodsNum = item.goodsNum;
          this.sendForm.reqParams.push(data);
        });
      } else {
        this.freightType = 'moresu';
        const data = JSON.parse(JSON.stringify(defeaultGoodLineItem));
        data.priceId = item.priceId;
        data.moreSuOrderId = item.moreSuOrderId;
        data.categoryName = item.categoryName;
        data.goodsSn = item.goodsSn;
        data.sendTypes = item.sendTypes;
        data.sendArea = item.sendArea;
        data.receiveArea = item.receiveArea;
        data.goodsNum = item.goodsNum;
        this.sendForm.reqParams.push(data);
      }
    },
    //关闭询价
    handleClose() {
      this.dialogVisible = false;
      this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
    },

    //确认询价
    handleConfirm() {
      this.$refs.sendForm.validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.sendForm));
          data.reqParams.forEach((item) => {
            delete item.sendTypes;
            delete item.sendArea;
            delete item.receiveArea;
            delete item.goodsSn;
            delete item.goodsNum;
          });
          if (this.freightType == 'crm') {//crm
            freightInput(data).then((res) => {
              Message.success("运费报价提交成功");
              this.dialogVisible = false;
              this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
              this.$emit("update");
            }).catch((err) => {});
          } else if (this.freightType == 'moresu') {//moresu
            inputOrderFreightAPI({
              moreSuOrderId:data.reqParams[0].moreSuOrderId,
              freightValue:data.reqParams[0].freightValue,
            }).then((res) => {
              Message.success("运费报价提交成功");
              this.dialogVisible = false;
              this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
              this.$emit("update1");
            }).catch((err) => {});
          }
        }
      })
    },
    //删除商品
    delGoods(index) {
      this.sendForm.reqParams.splice(index, 1);
    },
    //增加商品
    addGoods() {
      this.sendForm.reqParams.push(
        JSON.parse(JSON.stringify(defeaultGoodLineItem))
      );
    },
  },
};
</script>

<style  lang="scss" scoped>
.el-form-item__content span {
  font-size: 12px;
}
</style>

